<template>
    <a-card title="广告位管理">
        <template #extra>
            <a href="http://doc.74cms.com/#/se/content?id=pc%E9%A6%96%E9%A1%B5%E5%B9%BF%E5%91%8A%E4%BD%8D%E5%88%86%E5%B8%83%E5%9B%BE"
                target="_blank">查看广告位图例位置说明</a>
        </template>
        <div class="tip">
            <p>系统内置广告位不能删除！</p>
            <p>自定义广告位调用名不可以以 “QS_”开头</p>
        </div>
        <a-table :data-source="data" rowKey="_id" :columns="[
            {
                title: '广告位名称',
                slots: { customRender: 'name' }
            },
            {
                title: '调用名称',
                dataIndex: 'alias'
            },
            {
                title: '建议尺寸',
                slots: { customRender: 'size' }
            },
            {
                title: '广告数量',
                dataIndex: 'ad_num'
            },
            {
                title: '类型',
                slots: { customRender: 'is_sys' }
            },
            {
                title: '操作',
                slots: { customRender: 'option' }
            }
        ]" :rowSelection="{ selectedRowKeys, onChange: onSelectChange }" :pagination="{ defaultPageSize: 4 }">
            <template #name="scope">[{{ scope.text.platform }}]{{ scope.text.name }}</template>
            <template #size="scope">{{ scope.text.width }}*{{ scope.text.height }}</template>
            <template #is_sys="scope">
                <a-tag v-if="(scope.text.is_sys === '1')">系统内置</a-tag>
                <a-tag v-else color="blue">自定义</a-tag>
            </template>
            <template #option="scope">
                <el-button type="primary"
                    @click="$router.push('/content/ad/category_edit?id=' + scope.text._id)">编辑</el-button>
                <el-button type="danger" :disabled="(scope.text.call?.slice(0,3) === 'QS_')"
                    @click="del(scope.text._id)">删除</el-button>
            </template>
        </a-table>
        <div class="pos" :style="data.length === 0 ? 'bottom:0;position:relative;margin-top:15px;' : ''">
            <el-button type="primary" @click="$router.push('/content/ad/category_add')">添加广告位</el-button>
            <el-button type="danger" @click="delAll" :disabled="(selectedRowKeys.length === 0)">删除所选</el-button>
        </div>
    </a-card>
</template>

<script lang="ts" setup>
import request from '@/request'
import { onMounted, ref } from 'vue';
import { ElMessageBox } from 'element-plus'
import { message } from 'ant-design-vue'
// 数据
const data = ref([])
// 获取数据的方法
const getData = async () => {
    const { data: res } = await request.get('/advert')
    data.value = res.data.map((item: any) => ({ ...item, ad_num: item.number, alias: item.call }))
}
// 获取数据
onMounted(() => {
    getData()
})
// 删除方法
const del = (id: any) => {
    ElMessageBox.confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            request.delete('/advert?id=' + id).then(({ data }) => {
                if (data.code !== 200) {
                    message.error('删除失败!')
                    return
                }
                message.success('删除成功!')
                getData()
            })
        })
        .catch(() => {
            message.info('用户取消删除!')
        })
}
const selectedRowKeys = ref([])
const onSelectChange = (Keys: any) => {
    selectedRowKeys.value = Keys;
};
const delAll = () => {
    ElMessageBox.confirm(
        '此操作将永久删除这些数据, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            for (let item of data.value) {
                if (item.is_sys === '1' && selectedRowKeys.value.includes(item._id)) {
                    message.warning('不能删除系统内置广告!')
                    return
                }
            }
            for (let id of selectedRowKeys.value) {
                await request.delete('/advert?id=' + id)
            }
            message.success('删除成功!')
            getData()
        })
        .catch(() => {
            message.info('用户取消删除!')
        })
}
</script>

<style lang="scss" scoped>
.tip {
    padding: 8px 16px;
    background-color: #fdf6ec;
    border-radius: 4px;
    border-left: 5px solid #f9c77c;
    margin: 0 0 20px;

    p {
        font-size: 14px;
        color: #e6a23c;
        margin: 14px 0;
        line-height: 14px;
    }
}

.pos {
    position: absolute;
    bottom: 35px;
}
</style>